<template>
  <div>
    <div><search-item v-on:searchParams="getSearchParams"></search-item></div>
    <div class="mt20">
      <el-table
        border
        style="width: 100%"
        v-loading="loading"
        element-loading-text="拼命加载中"
        :data="tableData"
        border
        size="mini"
      >
        <el-table-column
          prop=""
          label="讲师ID"
          width=""
        >
        </el-table-column>
        <el-table-column
          width="120"
          prop=""
          label="用户手机"
        >
        </el-table-column>
        <el-table-column
          prop=""
          label="用户昵称">
        </el-table-column>
        <el-table-column
          prop=""
          width="120"
          label="用户注册时间">
        </el-table-column>
        <el-table-column
          prop=""
          label="封禁来源">
        </el-table-column>
        <el-table-column
          prop=""
          width="120"
          label="封禁时间">
        </el-table-column>
        <el-table-column
          prop=""
          width="150"
          label="封禁原因">
        </el-table-column>
        <el-table-column
          prop=""
          width="120"
          label="解封时间">
        </el-table-column>
        <el-table-column
          prop=""
          label="操作人">
        </el-table-column>
        <el-table-column
          label="操作">
          <template  slot-scope="scope">
            <el-button type="text" size="mini" @click="unblocking(scope.row)">解封</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="block mt10 tc mb10">
      <el-pagination
        background
        @current-change="handleCurrentChange"
        :current-page.sync="page"
        :page-size="pageSize"
        layout="total, prev, pager, next"
        :total="total">
      </el-pagination>
      <br>
    </div>
    <!--弹窗-->
    <common-dialog title="提示" width="40%" :base-dialog="dialogFormVisible">
      <div slot="body">
        <div>
          确定要解封“<span class="common-blue-color">{{dialogTableData}}</span>”吗？
        </div>
        <div class="tc mt20">
          <el-button @click="unblockingItem" size="medium">确定</el-button>
          <el-button @click="dialogFormVisible=false" size="medium">取消</el-button>
        </div>
      </div>
    </common-dialog>
    <!--弹窗-->
  </div>
</template>
<script>
  import service from '@/service';
  import searchItem from './searchBlack';
  import commonDialog from "@/components/Common/CommonDialog";
  export default {
    data(){
      return {
        tableData:[],
        loading:true,
        page:1,
        pageSize:20,
        total:0,
        totalParams:{},
        dialogFormVisible:false, //解除封禁
        dialogTableData:{},
      }
    },
    mounted(){
      this.getQueryDataList();
    },
    methods:{
      getSearchParams(params){
        this.totalParams = params;
        this.getQueryDataList();
      },
      async  getQueryDataList(page=1){
        let params = {

          page:page,
          pageSize:this.pageSize
        }
        //console.log(JSON.stringify(params));
        let res =await service.haiBeiServerQueryDataList(params);
        if(res.success){
          this.tableData=res.result.data.pageList;
          this.loading=false;
          this.page = res.result.data.page;
          this.total = res.result.data.nums;
        }
      },
      handleCurrentChange(val){
        this.getQueryDataList(val);
      },
      unblocking(data){
        //解封弹窗
        this.dialogFormVisible=true;
        this.dialogTableData = data;
      },
      unblockingItem(){
        //解封
        alert('解封');
      }
    },
    components:{
      searchItem,
      commonDialog
    }

  }
</script>

